<script setup lang="ts" name="Logo">
import logo from '@/assets/logo.svg'

const { variables } = useDesign()

const { t } = useI18n() // 国际化
</script>

<template>
  <div :class="[variables.namespace + '-logo']">
    <component :is="logo" :class="[variables.namespace + '-logo-img']" />
    <div :class="[variables.namespace + '-logo-title', 'lt-md:hidden']">{{ t('common', 'title') }}</div>
  </div>
</template>

<style lang="scss" scoped>
.#{$namespace}-logo {
  display: flex;
  align-items: center;

  .#{$namespace}-logo-img {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 0;
    color: var(--el-color-primary);
    vertical-align: middle;
    transition: all 0.28s;
    fill: currentcolor;
  }

  .#{$namespace}-logo-title {
    position: relative;
    z-index: 2;
    margin: 0 0 0 8px;
    font-size: 20px;
    color: var(--el-color-primary);
    white-space: nowrap;
    vertical-align: middle;
    opacity: 1;
    transition: color 0.28s, font-size 0.28s, opacity 0.56s;
  }
}
</style>
